<template>
	<div class="Details">
		<div class="container">
			<header>
				<div class="top">
					<span class="left" @click="goBack()">
						<img src="~img/details/return.png" />
					</span>
					<span class="right">
						<img src="~img/details/shopcar.png" />
						<img src="~img/details/more.png" />
					</span>
				</div>
			</header>
			<BannerSwiper :resData="resData"></BannerSwiper>
			<div class="text">
				<div class="text_top">
					<p>Aptamil 德国爱他美  婴儿奶粉  2段800/克    3罐装  6-10月</p>
					<div class="collection">
						<img src="~img/details/collection.png" />
						<span>收藏</span>
					</div>
				</div>
				<div class="text_bottom">
					<div class="price">
						<p>￥445.00</p>
						<span>￥998.00</span>
					</div>
					<ProDiscount :DetailsInfo = "DetailsInfo" class="ProDiscount"></ProDiscount>
				</div>
			</div>
			<div class="tab">
				<div class="tab_title">
					<router-link 
						tag="h3"
						v-for="(item,index) of tabList"
						:class = "{active: index == currentIndex}"
						@click.native= "handleTab(index)"
						:key="item.id"
						:to="item.TabUrl"
					>
						{{item.tabTitle}}
					</router-link>
				</div>
			</div>
			<div class="tab-content">
				<router-view></router-view>
			</div>
		</div>
		<div class="details-options" v-if="isShow">
			<div class="opacity" @click="close()"></div>
			<div class="options">
				<div class="option">
					<div class="option-top">
						<img src="~img/details/head_img.jpg" />
						<div class="option-info">
							<span>{{resData.DetailsOptions.price | fixed | rmb}}</span>
							<p>库存123456件</p>
							<p>请选择商品属性</p>
						</div>
						<button 
							@click="close()"
						>
						</button>
					</div>
					<div class="nums">
						<p>购买数量</p>
						<form class="form">
							<button @click.prevent="reduce()">-</button>
							<input 
								type="text" 
								v-model="num" 
								@blur="blur()"
								ref = "num"
							/>
							<button @click.prevent="add()">+</button>
						</form>
					</div>
					<OptionList :optionInfo="size"></OptionList>
					<OptionList :optionInfo="age"></OptionList>
					<button class="confirm" @click="confirm()">确定</button>
				</div>
			</div>
		</div>
		<div class="MenuBar">
			<div class="btn">
				<button class="shopcar" @click="open()">加入购物车</button>
				<button class="buy" @click="open()">立即购买</button>
			</div>
		</div>
	</div>
</template>

<script>
	import BannerSwiper from "./Components/BannerSwiper"
	import OptionList from "./Components/OptionList"
	import ProDiscount from "./Components/ProDiscount"
	export default{
		name:'Details',
		components:{
			BannerSwiper,
			OptionList,
			ProDiscount
		},
		
		filters:{
			fixed:function(v){
				return parseInt(v).toFixed(2)
			},
			rmb:function(v){
				return '￥' + v
			}
		},
		
		data(){
			return{
				resData:[],
				size:{},
				age:{},
				currentIndex:0,
				isShow:false,
				num:1,
				DetailsInfo:{},
				arr:[],
				id:1,
				tabList:[
					{
						id:"001",
						tabTitle:"商品详情",
						TabUrl:"/Details/ProDetails"
					},{
						id:"002",
						tabTitle:"买家口碑",
						TabUrl:"/Details/PublicPraise"
					}
				]
			}
		},
		
		methods:{
			goBack(){
				this.$router.go(-1)
			},
			handleTab(i){
				this.currentIndex = i
			},
			close(){
				this.isShow = false;
			},
			reduce(){
				if(this.num>1){
					this.num--
				}
			},
			add(){
				this.num++
			},
			blur(){
				var val = parseInt(Math.abs((this.$refs.num.value)))
				if(isNaN(val)){
					return this.num = 1
				}
				this.num = val
			},
			open(){
				this.isShow = true
				close()
			},
			confirm(){
				this.close()
				let proItem = {
					"id":this.id,
					"imgUrl":this.resData.DetailsOptions.imgUrl,
					"des":this.resData.DetailsOptions.des,
					"nums":this.num,
					"price":this.resData.DetailsOptions.price
				}
				this.arr.push(proItem)
				localStorage.setItem("prolist",JSON.stringify(this.arr))
				this.id++
			}
		},
		
		mounted(){
			this.$http.get("api/Details.json")
			.then((res)=>{
				this.resData = res.data
				this.size = this.resData.optionList.size
				this.age = this.resData.optionList.age
				this.DetailsInfo = this.resData.DetailsInfo
				console.log(typeof(this.resData.DetailsOptions.nums))
			})
		}
	}
</script>

<style lang="scss" scoped>
	.Details{
		height: 100%;
		position: relative;
	}
	.Details .container{
		width:100%;
		position: absolute;
		top:0;
		z-index: 1;
	}
	.Details header{
		height: 100%;
		position: relative;	
	}
	.Details .top{
		width:100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding:0 30px;
		margin-top: 8px;
		position: absolute;
		z-index: 2;
	}
	.Details .top span{
		width:52px;
		height: 52px;
		display: block;
	}
	.Details .top .right{
		width:145px;
		display: flex;
		justify-content: space-between;
	}
	.Details .top span img{
		width: 52px;
		height: 52px;
		display: block;
	}
	.Details BannerSwiper{
		position: absolute;
		z-index: 1;
	}
	.Details .text{
		width:100%;
	}
	.Details .text .text_top{
		display: flex;
		justify-content: space-between;
		padding:0 30px;
		box-sizing: border-box;
		height: 90px;
	}
	.Details .text .text_top p{
		width:570px;
		font-size: 30px;
		line-height: 35px;
		letter-spacing: 5;
		color:#333333;
	}
	.Details .text .text_top .collection{
		width:68px;
		text-align: center;
	}
	.Details .text .text_top .collection img{
		width:35px;
		height: 35px;
		display: block;
		margin:0 auto;
		margin-bottom: 12px;
	}
	.Details .text .text_top .collection span{
		font-size: 16px;
		color: #ff3300;
	}
	.Details .text .text_bottom {
		height: 90px;
		display: flex;
	}
	.Details .text .text_bottom .price{
		line-height: 45px;
		margin-left: 28px;
	}
	.Details .text .text_bottom .price p{
		color:#ff3333;
		font-size: 34px;
	}
	.Details .text .text_bottom .price span{
		color:#999;
		font-size: 24px;
	}
	.Details .tab{
		width:100%;
		height: 86px;
		border-top: 32px solid #eeeeee;
	}	
	.Details .tab .tab_title{
		width:100%;
		height: 86px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid #ccc;
	}
	.Details .tab .tab_title h3{
		font-size: 26px;
		color: #999;
		width:150px;
		height: 51px;
		line-height: 51px;
		text-align: center;
	}
	.Details .tab .tab_title .active{
		background: url("~img/details/tab_bg.jpg") no-repeat bottom;
		background-size:150px 3px;
	}
	.Details .MenuBar{
		width: 100%;
		height: 97px;
		position: fixed;
		bottom: 0;
		z-index: 999;
		background: #fff;
		border-top: 1px solid #ddd;
	}
	.Details .MenuBar .btn{
		width:400px;
		float:right;
		display: flex;
	}
	.Details .MenuBar .btn button{
		width:200px;
		height: inherit;
		line-height: 97px;
		font-size: 30px;
		color:#fff;
		text-align: center;
	}
	.Details .MenuBar .btn .shopcar{
		background: #ff9900;
	}
	.Details .MenuBar .btn .buy{
		background: #eb2222;
	}
	.Details .details-options{
		width:100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 2;
	}
	.Details .details-options .opacity{
		width:100%;
		height: 100%;
		background: #000000;
		opacity:0.5;
		position: absolute;
	}
	.Details .details-options .options{
		width:100%;
		background: #FFFFFF;
		position: fixed;
		bottom: 98px;
	}
	.Details .details-options .options .option{
		width:100%;
		padding:0 35px;
		box-sizing: border-box;
	}
	.Details .option .option-top{
		display: flex;
		height: 187px;
		align-items: center;
		position: relative;
	}
	.Details .option .option-top img{
		display: block;
		width:202px;
		height: 202px;
		border: 6px solid #cccccc;
		border-radius:6px;
		margin-top:-25px;
	}
	.Details .option .option-info{
		margin-left:25px;
		line-height: 35px;
	}
	.Details .option .option-info span{
		font-size: 30px;
		color:#ff3333;
	}
	.Details .option .option-info p{
		font-size: 25px;
		color:#333333;
	}
	.Details .option .option-top button{
		width:56px;
		height: 56px;
		display: block;
		background: url("~img/details/close.png") no-repeat;
		background-size: 56px;
		position: absolute;
		right: 0;
	}
	.Details .option .nums{
		width:100%;
		height: 50px;
		line-height: 50px;
		display: flex;
		margin-top: 20px;
		justify-content: space-between;
	}
	.Details .option .nums p{
		color:#333;
		font-size: 30px;
	}
	.Details .option .nums .form{
		display: flex;
	}
	.Details .option .form button{
		width:47px;
		height: 50px;
		text-align: center;
		color:#fff;
		display: block;
	}
	.Details .option .form input{
		width:100px;
		border-bottom: 2px solid #ccc;
		border-top: 2px solid #ccc;
		text-align: center;
	}
	.Details .option .confirm{
		display: block;
		width:100px;
		height: 50px;
		margin:45px auto;
		background: #ff9900;	
		color: #fff;
		text-align: center;
		line-height: 50px;
		border-radius: 10px;
		font-size: 30px;
	}
</style>